<template>
  <div>
    <div class="font-div">客服</div>
    <!-- 聊天内容框 -->
    <div class="border-div" style="overflow: auto">
      <ul class="infinite-list">
        <li v-for="(msg, index) in msgAll" :key="index" :class="msg.result === 1 ? 'user-msg-item' : 'user-ai-item'">
          <img style="float: right" v-if="msg.result === 1" src="../images/1.png">
          <img style="float: left" v-else src="../images/0.png">
          <div :class="msg.result === 1 ? 'user-font-width' : 'ai-font-width'">{{ msg.content }}</div>
        </li>
      </ul>
    </div>
    <div>
      <el-row class="bottom-div">
        <el-autocomplete class="input-width" v-model="inputMsg" :fetch-suggestions="querySearch" placeholder="请输入内容"
          placement="top"></el-autocomplete>
        <el-button @click="userClick()" type="success">发送</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      //保存用户输入的信息
      inputMsg: "",
      //保存输入的所有信息
      msgAll: [],
      //保存提示信息
      restaurants: [],
    };
  },
  methods: {
    //点击输入框，或者改变输入内容都调用该函数更新提示信息
    querySearch (queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //返回一个匿名函数，该匿名函数将restaurants里的的每个值进行对比
    createFilter (queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    //返回所有保存的提示信息
    loadAll () {
      return [
        { value: "翻译i love you" },
        { value: "你好" },
        { value: "笑话" },
        { value: "1+1*2" },
        { value: "成语一生一世" },
      ];
    },
    replaceAll (value, t) {
      let reg = new RegExp(`${value}`, 'g');
      return this.replace(reg, `${t}`);
    },
    //用户点击发送
    async userClick () {
      let m = this.inputMsg;
      this.inputMsg = "";
      this.msgAll.push({ result: 1, content: m });
      m = m.replaceAll('+', '%2B');
      m = encodeURIComponent(m);
      this.$http.get("menber/font/ai?msg=" + m).then((res) => {
        var data = res.data;
        data.content = data.content.replaceAll('{br}', '\n');
        this.msgAll.push({ result: 0, content: data.content });
      })
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.restaurants = this.loadAll();
  },
};
</script>
<style scoped>
.border-div {
  width: 100%;
  background-color: #dcdfe6;
  height: 400px;
}

.font-div {
  text-align: center;
  background-color: #606266;
  color: white;
  font-size: 24px;
  line-height: 60px;
}

.input-width {
  width: 600px;
  margin: 5px 10px;
}

.bottom-div {
  bottom: 0;
}

.infinite-list {
  height: 450px;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 用户聊天内容样式 */
.user-msg-item {
  width: 90%;
  float: right;
  margin-top: 15px;
}

/* 机器人聊天内容样式 */
.user-ai-item {
  width: 90%;
  float: left;
  margin-top: 15px;
}

/* 机器人聊天内容文本 */
.ai-font-width {
  float: left;
  width: 90%;
  background-color: #fff;
  min-height: 40px;
  font-size: 15px;
  line-height: 24px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #d8d8d8;
  color: #333;
  /* 文本换行 */
  word-break: break-all;
  white-space: pre-wrap
}

.user-font-width {
  width: 90%;
  float: right;
  background-color: #98e855;
  min-height: 40px;
  font-size: 15px;
  line-height: 24px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #d8d8d8;
  color: #333;
  /* 文本换行 */
  word-break: break-all;
  white-space: pre-wrap;
}
</style>